
<template>
  <div>
    <p-modal
      :title="title"
      width = '80%'
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >

    <div>
      基础资料
    </div>

    <p-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
         <p-row :gutter="24">
            <p-col :xl="8" :lg="12" :md="12" :sm="24">
              <p-form-model-item ref="skillId" label="技能名称" prop="skillId">
                <p-select v-model="form.skillId"  @change="skillChange">
                  <p-select-option v-for="(item, index) in skillList" :key="index" :value="item.id + ''">
                    {{item.skillName}}
                  </p-select-option>
                </p-select>
              </p-form-model-item>
            </p-col>
            <p-col :xl="8" :lg="12" :md="12" :sm="24">
              <p-form-model-item ref="skillNo" label="技能编码" prop="skillNo">
                <p-input
                  disabled
                  v-model="form.skillNo"
                />
              </p-form-model-item>
            </p-col>
            <p-col :xl="8" :lg="12" :md="12" :sm="24">
              <p-form-model-item ref="templateType" label="模板类别" prop="templateType">

                <p-select v-model="form.templateType">
                  <p-select-option v-for="(item, key) in khTemplateTypeKeys" :key="key" :value="key*1">
                    {{item}}
                  </p-select-option>
                </p-select>

              </p-form-model-item>
            </p-col>
            <p-col :xl="8" :lg="12" :md="12" :sm="24">
              <p-form-model-item ref="assessTemplateNo" label="考核模板编号" prop="assessTemplateNo">
                
                <p-input
                  v-model="form.assessTemplateNo"
                />
              </p-form-model-item>
            </p-col>
            <p-col :xl="8" :lg="12" :md="12" :sm="24">
              <p-form-model-item ref="assessTemplateName" label="考核模版名称" prop="assessTemplateName">
                <p-input
                  v-model="form.assessTemplateName"
                />
              </p-form-model-item>
            </p-col>

         </p-row>
      
      </p-form-model>    


    <div>
      考核信息维护
    </div>

      <p-button type="primary" @click="showAddModal" style="margin-bottom: 10px;">新增</p-button>

     <p-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="form.detailDtos"
        :pagination="ipagination"
        :loading="loading"
      >
        <span slot="action" slot-scope="text, record, index">
          <a @click="handleDelete(index)">删除</a>
        </span>
      </p-table>  

      <AssessTemplateDetailModal ref="assessTemplateDetailModal" @addAssessDetail = 'addAssessDetail' ></AssessTemplateDetailModal>

    </p-modal>
  </div>
</template>
<script>
import { getDictItemsArr } from "@/utils/util";
import { postAction, getAction, deleteAction, putAction } from "@/api/manage";
import AssessTemplateDetailModal from './assessTemplateDetailModal.vue'



export default {
  data() {
    return {
      state: 'add',
      visible: false,
      confirmLoading: false,
      labelCol: { span: 12},
      wrapperCol: { span: 12 },
      other: '',
      khTemplateTypeKeys: {},
      editId: '',
      form: {
        skillId: '',
        skillName: '',
        skillNo: '',
        templateType: '',
        assessTemplateNo: '',
        assessTemplateName: '',
        detailDtos: []
      },
      rules: {
        skillId: [{ required: true, message: '请选择技能', trigger: 'blur' }],
        templateType: [{ required: true, message: '请选择模板类别', trigger: 'blur' }],
        assessTemplateNo: [{ required: true, message: '请输入考核模板编号', trigger: 'blur' }],
        assessTemplateName: [{ required: true, message: '请输入考核模版名称', trigger: 'blur' }],
      },  
      skillList: [],
     columns: [
        {
          title: "序号",
          dataIndex: "",
          key: "rowIndex",
          width: 60,
          align: "center",
          customRender: (t, r, index) => {
            return parseInt(index) + 1;
          },
        },
        {
          title: "考核项目",
          align: "center",
          dataIndex: "assessProject",
        },
        {
          title: "分数",
          align: "center",
          dataIndex: "score",
        }, 
        {
          title: "考核标准",
          align: "center",
          dataIndex: "assessStandard",
        }, 
        {
          title: "考核评分明细项",
          align: "center",
          dataIndex: "assessScoreDetail",
        },    
        {
          title: "操作",
          dataIndex: "action",
          align: "center",
          scopedSlots: { customRender: "action" },
        },           
      ],
       
      url: {
        add: '/mes-manpower/mesHrAssessTemplate',
        edit: '/mes-manpower/mesHrAssessTemplate',
        skillList: '/mes-manpower/mesHrSkillBank/getList',
      }    
    };
  },
  computed: {
    title(){
      return  {"add": "新增", "edit": "编辑"}[this.state]
    }
  },  
  mounted() {
    this.getAjaxGetDictItems()
    this.getSkillList()
  },
  methods: {

    // 获取数字字典
    getAjaxGetDictItems() {
      const arr = [
        { code: "mes_kh_template_type", key: "khTemplateTypeKeys" },
      ];
      getDictItemsArr(this, arr);
    },

    // 获取技能列表
    getSkillList(){
      getAction(this.url.skillList).then( res => {
        if(res.success) {
          this.skillList = res.data
        }
      } )
    },

    // 选择技能
    skillChange(val) {
      
      this.skillList.forEach(ele => {
        if(ele.id == val) {
          this.form.skillNo = ele.skillCode
          this.form.skillName = ele.skillName
          this.form.assessTemplateName = ele.skillName
        }
      })
    },

    // 新增考核详情
    addAssessDetail(data){
      this.form.detailDtos.push( JSON.parse(JSON.stringify(data)))
    },

    handleDelete(index){
      this.form.detailDtos.splice(index, 1)
    },

    showAddModal(){
      this.$refs.assessTemplateDetailModal.showModal()
    },

    showModal(record) {
      console.log(record);
      
      Object.assign(this.$data.form, this.$options.data().form)
      if(record) {
        this.state = 'edit'
        console.log(record);
        for (let key in this.form) {
          this.form[key] = record[key]
        }

        this.editId = record.id
      } else {
        this.state = 'add'
      }
      this.visible = true;
    },

    handleOk(e) {
      this.confirmLoading = true;
      const params = JSON.parse(JSON.stringify(this.form))
      params.detailDtos = this.form.detailDtos
      if( this.state == 'add'  ) {
        postAction(this.url.add, params).then( res => {
          if( res.success) {
            this.confirmLoading = false;  
            this.handleCancel()
            this.$emit('handleSuccess')        
          }else {
            this.$message.error(res.msg)
          }
        } )
      }

      if( this.state == 'edit' ) {
        params.id = this.editId
        putAction(this.url.edit, params).then( res => {
          if( res.success) {
            this.confirmLoading = false;  
            this.handleCancel()
            this.$emit('handleSuccess')        
          }else {
            this.$message.error(res.msg)
          }
        } )        
      }

    },

    handleCancel(e) {
      this.visible = false;
      Object.assign(this.form, this.$options.data().form);
      this.$refs.ruleForm.resetFields()
    },
  },
  components: {
    AssessTemplateDetailModal
  }
};
</script>
